<template>
  <view class="JIANBAIN">
    <dao title="打饭设置" />

    <view style="margin-top: 100rpx; padding: 0 20rpx">
      <view class="shig">运行状态：运行中</view>
      <view class="biaozn">{{ Mode[mo] }}</view>
      <view class="xuabn">
        <view
          v-for="(item, index) in items.data"
          :key="index"
          @click="duiying(item, index)"
          :class="{ sd: ind == index }"
          class="xu"
          >{{ item }}</view
        >
      </view>
      <view class="kuanvox">
        <image
          style="width: 200rpx"
          src="../../static/mifan.png"
          mode="widthFix"
        />

        <text class="nit"> 米饭量/{{ items.data[ind] }}g </text></view
      >

      <button
        @click="tidafgan"
        style="background-color: #21afff; margin-top: 100rpx"
        type="primary"
      >
        打饭
      </button>
      <view @click="dakai" class="weitiao">
        <text>设置</text>
        <uni-icons color="#21afff" type="gear-filled" size="24"></uni-icons>
        <!-- <text style="margin-right: 100rpx">帮助</text> -->
      </view>
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 80rpx;
        "
      >
        <uni-icons color="#ccc" type="help-filled" size="24"></uni-icons>
        <text style="color: #ccc"> 帮助</text>
      </view>
    </view>
  </view>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff">
    <view style="padding: 0 30rpx">
      <view style="width: 200rpx; height: 300rpx"></view>
      <view
        style="
          font-size: 42rpx;
          font-weight: 700;

          margin-bottom: 180rpx;
          text-align: center;
        "
        >饭量调整</view
      >
      <view
        style="margin-top: 40rpx"
        v-for="(item, index) in itemss.data"
        :key="index"
      >
        <uni-number-box
          width="200"
          background="#21afff"
          color="#fff"
          :max="1000"
          v-model="itemss.data[index]"
          :step="step"
        />
      </view>

      <view class="weitao">
        <checkbox-group @change="weito">
          <label>
            <view style="display: flex; align-items: center">
              <checkbox
                value="cb"
                color="#21afff"
                style="transform: scale(0.7)"
              />
              微调
            </view>
          </label>
        </checkbox-group>
      </view>

      <button
        @click="baocu"
        style="background-color: #21afff; margin-top: 100rpx"
        type="primary"
      >
        保存设置
      </button>
    </view>
  </uni-popup>
</template>

<script setup>
import dao from "../../pages/conpments/daohang.vue";
import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";

import { dafanti } from "../../api/login";
const popup = ref(null);
const items = reactive({
  data: uni.getStorageSync("mo")
    ? uni.getStorageSync("mo")
    : [130, 145, 150, 155, 160],
});
const itemss = reactive({
  data: [],
});
const baocu = async () => {
  tyijaopshuju.value.MealsWeight = null;
  tyijaopshuju.value.RxControl = 2;
  items.data = itemss.data;
  tyijaopshuju.value.MealsWeightConfig = itemss.data;

  const { data } = await dafanti(tyijaopshuju.value);
  console.log(data);
  if (data.code) {
    uni.setStorage({
      key: "mo",
      data: items.data,
      success: function () {
        uni.showToast({
          title: "设置成功！",
          icon: "success",
          duration: 500,
        });
        popup.value.close();
      },
    });
  } else {
  }
};
let Mode = ref({
  1: "标准模式",
  2: "连续模式",
  3: "预转载模式",
});

let mo = ref("");

let tyijaopshuju = ref({
  Id: null,
  RxControl: null,
  MealsWeight: null,
  MealsWeightConfig: null,
  Mode: null,
});

const duiying = (item, index) => {
  ind.value = index;
  tyijaopshuju.value.MealsWeight = item;
};
const tidafgan = async () => {
  tyijaopshuju.value.RxControl = 1;
  const { data } = await dafanti(tyijaopshuju.value);
  await dafanti(tyijaopshuju.value);
  if (data.code == 200)
    return uni.showToast({
      title: "操作成功！",
      icon: "success",
      duration: 500,
    });
};
onMounted(() => {
  const instance = getCurrentInstance().proxy;
  const eventChannel = instance.getOpenerEventChannel();

  eventChannel.on("acceptDataFromOpenerPage", function (data) {
    mo.value = data.Mode;
    items.data = data.data;
    itemss.data = data.data;
    tyijaopshuju.value.MealsWeight = items.data[0];
    tyijaopshuju.value.Id = data.id;
  });
});
let step = ref(5);
const weito = (e) => {
  if (e.detail.value.length) {
    step.value = 1;
  } else {
    step.value = 5;
  }
};

const dakai = () => {
  // (itemss.data = uni.getStorageSync("mo")
  //   ? uni.getStorageSync("mo")
  //   : [130, 145, 150, 155, 160]),
  popup.value.open("right");
};
const tui = () => {
  uni.navigateBack({
    delta: 1,
  });
};
let ind = ref(0);
</script>

<style scoped lang="scss">
.yang {
  height: 100rpx;
}

.fanhuis {
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50rpx;
  .title {
    font-weight: 700;
    font-size: 32rpx;
  }
}
.shig {
  color: #999;
  margin: 100rpx 0;
}
.JIANBAIN {
  height: 100vh;
  background: linear-gradient(to bottom, #b8dcfc 0%, #eef7ff 20%, #fff 100%);
}
.tosus {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}
.biaozn {
  text-align: center;
  font-size: 40rpx;
  color: #3a3a3a;
  font-weight: 700;
  margin-bottom: 30rpx;
}

.kuanvox {
  width: 100%;
  height: 500rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nit {
  color: #999;
}

.weitiao {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row-reverse;
  color: #21afff;
  margin-right: 20rpx;
}
.xuabn {
  width: 90vw;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 32rpx;
  align-items: center;
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);

  padding: 0 10rpx;
  margin: 40rpx auto;
  border-radius: 80rpx;
  background: #21afff;
  .xu {
    width: 33%;
    text-align: center;
    height: 70rpx;
    border-radius: 70rpx;
    font-weight: 700;
    line-height: 70rpx;
  }
  .sd {
    background: #fff;
    color: #6a6a6a;
  }
}

.weitao {
  text-align: right;
  margin-top: 50rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  color: #909399;
}
</style>
